<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=no"/>
<meta name="HandheldFriendly"content="true"/>
<meta http-equiv="x-rim-auto-match" content="none"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no">
<title>申请维修</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="style/css/global.css" rel="stylesheet">
<link href="style/css/common.css" rel="stylesheet">
<!-- <link href="style/css/common_.css" rel="stylesheet"> -->
<script type="text/javascript" src="style/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="style/js/zepto.min.js"></script>
<script type="text/javascript" src="style/js/common.js"></script>
<style type="text/css">
/*维修*/
	select { 
		display: block;
		width: 100%;
		border: 0;
		background: url(./style/images/ico_arrow_bot_small.png) no-repeat center right;
	 }
	select option { 
		color: black; 
	}
	select option:first-child {
	 color: #B1B1B1; 
	}
	select.empty {
	 color: #B1B1B1; 
	}
	/* Hidden placeholder */
	select option[disabled]:first-child {
	 display: none; 
	}
</style>
<script type="text/javascript">
	$(function (){
		$("select:has(option[value=]:first-child)").on('change', function() {
		    $(this).toggleClass("empty", $.inArray($(this).val(), ['', null]) >= 0);
		}).trigger('change');
		$('.textChange').on('input',function(){
			var len = $(this).val().length;
			if(parseInt(len) > 150){
				$(this).val($('.textChange').val().substring(0,150))
			}
			$('.font').text(len +'/150')
		})

	})
</script>
</head>
<body>
<div class="wrap">
	<!--头部-->
	<div class="header w_screen">
		<h1 class="title color">申请维修</h1>
		<a href="javascript:history.go(-1);" class="btn_left reset"><span class="ico_back white"></span></a>
	</div>

	<!--主体-->
	<div class="main pad_header">
		<form action =''>
		<div class="form_pay config">
			<div class="item_box">
				<div class="item repair">
						<select class="empty">
						    <option value="" selected disabled>选择您需要报修的类目</option>
						    <option value="1">厨房</option>
						    <option value="2">卧室</option>
						    <option value="3">客厅</option>
						</select>
				</div>
			</div>
			<div class="item_box tip">
				<div class="item text">
					<textarea  placeholder="想要一修哥做点啥" class ='textChange' ></textarea>
					<span class ='font'>0/150</span>
				</div>
			</div>
			<div class="item_box">
				<div class="item pic fixed">
					<div class='box outline'>
							<input type="file" id="fileElem" class ='upload' multiple accept="image/*"  onchange="handleFiles(this,0)">
							<input type="file" id="fileElem" class ='upload' multiple accept="image/*"  onchange="handleFiles(this,1)">
							<input type="file" id="fileElem" class ='upload' multiple accept="image/*"  onchange="handleFiles(this,2)">
							<!-- <div id="fileList" style="width:10rem;height:10rem;"></div> -->
								<script>
								window.URL = window.URL || window.webkitURL;
								
								function handleFiles(obj,num) {
								var fileElem = $(".upload")[num],
								    // fileList = document.getElementById("fileList");
								    fileList = $('<div class="box ano"></div>');
								var files = obj.files,
									img = new Image();
								if(window.URL){
								//File API
							  	
						      	img.src = window.URL.createObjectURL(files[0]); //创建一个object URL，并不是你的本地路径
						      	img.width = 200;
						      	img.onload = function(e) {
						      	   window.URL.revokeObjectURL(this.src); //图片加载后，释放object URL
						      	}
						      	var inner = $('<div class ="inner_over"></div>').append(img)
						      	fileList.append(inner);
						      	$('.item.pic').prepend(fileList)
						      	$($(".upload")[num]).css('display','none')
								}else if(window.FileReader){
								//opera不支持createObjectURL/revokeObjectURL方法。我们用FileReader对象来处理
								var reader = new FileReader();
								reader.readAsDataURL(files[0]);
								reader.onload = function(e){
									
									img.src = this.result;
									img.width = 200;
									var inner = $('<div class ="inner_over"></div>').append(img)
									fileList.append(inner);
									$('.item.pic').prepend(fileList);
									$($(".upload")[num]).css('display','none')
								}
								}
								}
								</script>
					</div>
				</div>
			</div>
		</div>
		
		
		
		<div class="btn_tile reset" style ='margin-top:6rem'>
			<input type="submit" / value ='确认支付' class ='check_btn_afford'>
			<a class="btn pink" href="">确认提交</a>
		</div>
		</form>
		
		
	</div>
</div>

<div class="wrap_bg bg_grey w_screen"></div>
</body>
</html>